<template>
    <div class="member-add">
        <div class="member-add-card">
            <Row :gutter="16">
                <Col span="12">
                    <Card>
                        <p slot="title">
                            <a><Icon type="gear-a"></Icon> 基本信息</a>
                        </p>
                        <div class="formCon">
                            <a class="title">{{title}}</a>
                            <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
                                <FormItem label="用户名" prop="username">
                                    <Input v-model="formValidate.username" placeholder="请输入账号"></Input>
                                </FormItem>
                                <FormItem label="手机号码" prop="phone">
                                    <Input v-model="formValidate.phone" placeholder="请输入手机号码"></Input>
                                </FormItem>
                                <FormItem label="密码" prop="pwd">
                                    <Input type="password" v-model="formValidate.pwd" placeholder="如不修改 请留空"></Input>
                                </FormItem>
                                <FormItem label="二级密码" prop="twopwd">
                                    <Input type="password" v-model="formValidate.repwd" placeholder="请输入二级密码"></Input>
                                </FormItem>
                                <!--<FormItem label="用户名" prop="username">-->
                                    <!--<Input v-model="formValidate.username" placeholder="请输入用户名"></Input>-->
                                <!--</FormItem>-->
                                <!--<FormItem label="性别" prop="sex">-->
                                    <!--<RadioGroup v-model="formValidate.sex">-->
                                        <!--<Radio label="1">男</Radio>-->
                                        <!--<Radio label="2">女</Radio>-->
                                        <!--<Radio label="3">保密</Radio>-->
                                    <!--</RadioGroup>-->
                                <!--</FormItem>-->
                                <FormItem label="状态" prop="status">
                                    <RadioGroup v-model="formValidate.status">
                                        <Radio label="-2">冻结</Radio>
                                        <Radio label="99">注册会员</Radio>
                                        <Radio label="1">正式会员</Radio>
                                    </RadioGroup>
                                </FormItem>
                                <FormItem label="实名认证状态" prop="audit">
                                    <RadioGroup v-model="formValidate.audit">
                                        <Radio label="0">未提交</Radio>
                                        <Radio label="1">待审核</Radio>
                                        <Radio label="2">已通过</Radio>
                                    </RadioGroup>
                                </FormItem>
                                <!--<FormItem label="级别" prop="level">-->
                                    <!--<RadioGroup v-model="formValidate.level">-->
                                        <!--<Radio label="1">vip会员</Radio>-->
                                        <!--<Radio label="2">金卡会员</Radio>-->
                                        <!--<Radio label="3">钻石会员</Radio>-->
                                        <!--<Radio label="4">红钻会员</Radio>-->
                                        <!--<Radio label="5">皇钻会员</Radio>-->
                                    <!--</RadioGroup>-->
                                <!--</FormItem>-->

                                <FormItem label="电子邮箱" prop="email">
                                    <Input v-model="formValidate.email" placeholder="请输入电子邮箱"></Input>
                                </FormItem>
                                <FormItem label="真实姓名" prop="real_name">
                                    <Input v-model="formValidate.nick" placeholder="请输入真实姓名"></Input>
                                </FormItem>
                                <!--<FormItem label="生日" prop="birthday">-->
                                    <!--<Input v-model="formValidate.birthday" placeholder="请输入生日 格式：xxxx-xx-xx"></Input>-->
                                <!--</FormItem>-->
                                <!--<FormItem label="推荐人" prop="tuijian_name">
                                    <Input v-model="formValidate.tuijian_name" placeholder="请输入推荐人"></Input>
                                </FormItem>-->
                                <!--<FormItem label="团呗币" prop="tuanbei">-->
                                    <!--<Input number v-model="formValidate.tuanbei" placeholder="请输入团呗币"></Input>-->
                                <!--</FormItem>-->
                                <!--<FormItem label="推手等级" prop="dengji">-->
                                    <!--<RadioGroup v-model="formValidate.dengji">-->
                                        <!--<Radio label="1">普通推手</Radio>-->
                                        <!--<Radio label="2">金牌推手</Radio>-->
                                    <!--</RadioGroup>-->
                                <!--</FormItem>-->
                                <!--<FormItem label="会员状态" prop="status">-->
                                    <!--<RadioGroup v-model="formValidate.status">-->
                                        <!--<Radio label="1">启用</Radio>-->
                                        <!--<Radio label="0">停用</Radio>-->
                                    <!--</RadioGroup>-->
                                <!--</FormItem>-->
                            </Form>
                        </div>
                    </Card>
                </Col>
                <!--<Col span="12">-->
                    <!--<Card>-->
                        <!--<p slot="title">-->
                            <!--<a><Icon type="ios-cloud-upload-outline"></Icon> 头像上传</a>-->
                        <!--</p>-->
                        <!--<Upload accept="image/png, image/jpeg, image/gif, image/jpg" type="drag" action="?" :before-upload="handleBeforeUpload">-->
                            <!--<div class="upImg">-->
                                <!--<a><Icon type="ios-cloud-upload" size="52"></Icon></a>-->
                                <!--<p>点击或将图片拖拽到这里上传</p>-->
                            <!--</div>-->
                        <!--</Upload>-->
                    <!--</Card>-->
                    <!--<Card style="height: 312px;margin-top: 20px">-->
                        <!--<p slot="title">-->
                            <!--<a><Icon type="ios-person"></Icon> 头像展示</a>-->
                        <!--</p>-->
                        <!--<a slot="extra" @click="imgUrl = ''"><Icon type="close"></Icon>清除</a>-->
                        <!--<img class="imgUp" v-if="imgUrl!=''" :src="imgUrl"/>-->
                    <!--</Card>-->
                <!--</Col>-->
            </Row>
            <!--提交-->
            <div class="subCon">
                <ButtonGroup>
                    <Button type="primary" @click="sub" :loading="loading">提交</Button>
                    <Button type="ghost" @click="reset">重置</Button>
                </ButtonGroup>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        name:"member-add",
        data(){
            const validateNum = (rule, value, callback) => {
                if (!value) {
                    return callback(new Error('请输入数字'));
                }
                // 模拟异步验证效果
                setTimeout(() => {
                    if (!Number.isInteger(value)) {
                        callback(new Error("请输入数字"));
                    } else {
                        callback();
                    }
                }, 1000);
            };
            return{
                title:"新增会员",
                formValidate:{
                    audit:'',
                    name:"",
                    pwd:"",
                    /*twopwd:"",*/
                    username:"",
                    sex:"1",
                    phone:"",
                    email:"",
                    // shangji:"",
                    // tuanbei:"",
                    // dengji:"1",
                    status:"99",
                    level:'1',
                    nick:'',
                    birthday:'',
                    tuijian_name:''
                },
                ruleValidate:{
                    name: [{ required: true, message: '请输入账号', trigger: 'blur' }],
                    pwd: [{ required: false, message: '请输入密码', trigger: 'blur' }],
                    twopwd: [{ required: false, message: '请输入密码', trigger: 'blur' }],
                    username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
                    sex: [{ required: true, message: '请选择性别', trigger: 'change' }],
                    phone: [{ required: true, message: '请输入手机号码', trigger: 'blur' }],
                    email: [{ required: false, message: '请输入电子邮箱', trigger: 'blur' }],
                    tuijian_name: [{ required: false, message: '请输入推荐人', trigger: 'blur' }],
                    // shangji: [{ required: true, message: '请输入上级推手', trigger: 'blur' }],
                    // tuanbei: [{ required: true, validator: validateNum, trigger: 'blur' }],
                    level: [{ required: true, message: '请选择等级', trigger: 'change' }],
                    status: [{ required: true, message: '请选择状态', trigger: 'change' }],
                    audit: [{ required: true, message: '请选择实名认证状态', trigger: 'change' }],
                },
                imgUrl:"",
                loading:false,
                isEdit:false,
                uid:""
            }
        },
        mounted(){
            if(this.$route.query.isEdit){
                this.isEdit = true
                this.uid=this.$route.query.uid
                this.getData()
                this.title = "修改会员"
            }
        },
        methods:{
            getData(){
                this.getJsonData("User/Index",{uid:this.uid})
                    .then((res)=>{
                        this.formValidate.name=res.user[0].name
                        this.formValidate.sex=res.user[0].sex
                        this.formValidate.username=res.user[0].username
                        this.formValidate.phone=res.user[0].phone
                        this.formValidate.audit=res.user[0].audit
                        this.imgUrl=res.user[0].pic
                        this.formValidate.status=res.user[0].status
                        this.formValidate.real_name=res.user[0].real_name
                        this.formValidate.pwd=""
                        /*this.formValidate.twopwd=res.user[0].twopwd*/
                        this.formValidate.birthday=res.user[0].year + '-' + res.user[0].month + '-' + res.user[0].day
                        this.formValidate.email=res.user[0].email
                        this.formValidate.level=res.user[0].level
                        this.formValidate.tuijian_name=res.user[0].tuijian_name

                    })
            },
            handleBeforeUpload(file){
                if((Math.round(file.size/1024*100)/100)<2000){
                    this.caijianImg(file)
                }else{
                    this.$Notice.error({
                        title: '文件过大',
                        desc: '文件 '+file.name +'/'+(Math.round(file.size/1024*100)/100)+'KB'+'，请上传 2M 以内的图片。',
                        duration:4.5
                    });
                }
                //禁止默认上传
                return false
            },
            caijianImg(file){
                let reader = new FileReader();
                reader.onload = () => {
                    this.upImg(reader.result)
                    reader.onload = null;
                };
                reader.readAsDataURL(file);
            },
            upImg(image){
                this.upBaseImg("User/uploadPic",{image})
                    .then((res) =>{
                        this.imgUrl=res.url
                    })
            },
            sub(){
                this.$refs.formValidate.validate((valid) => {
                    if (valid) {
                        this.sureSub()
                    }
                })
            },
            sureSub(){
                /*if(this.imgUrl=="")
                {
                    this.$Message.warning("请上传头像");
                    return;
                }*/
                this.loading = true;
                let obj = {
                    tuijian_name:this.formValidate.tuijian_name,
                    name:this.formValidate.name,
                    pwd:this.formValidate.pwd,
                    /*twopwd:this.formValidate.twopwd,*/
                    sex:this.formValidate.sex,
                    username:this.formValidate.username,
                    phone:this.formValidate.phone,
                    pic:this.imgUrl,
                    status:this.formValidate.status,
                    email:this.formValidate.email,
                    real_name:this.formValidate.real_name,
                    level:this.formValidate.level,
                    audit:this.formValidate.audit,
                    year:this.formValidate.birthday.split("-")[0],
                    month:this.formValidate.birthday.split("-")[1],
                    day:this.formValidate.birthday.split("-")[2],
                };
                if(this.isEdit)this.$set(obj,"uid",this.uid)
                this.getJsonData("User/addUser",obj,true)
                    .then((res)=>{
                        this.loading = false
                        this.$Message.success(this.isEdit?'修改成功':'新增成功')
                        this.$router.back()
                    })
                    .catch((res)=>{
                        this.loading = false
                    })
            },
            reset(){
                this.imgUrl = ""
                this.$refs.formValidate.resetFields();
            }
        }
    }
</script>
<style lang="less">
    @import "./member-add";
</style>
